import { type Article } from "../../../types/content/article";
import {
  Table,
  TableProps,
  Tag,
  Image,
  Space,
  Button,
  Pagination,
  Modal,
} from "antd";
import QueryForm from "./components/QueryForm";
import { useNavigate } from "react-router-dom";
import PermissionBtn from "@/components/PermissionBtn";
import { useArticleTable } from "./hooks/useArticleTable";
import { ExclamationCircleFilled } from "@ant-design/icons";

export default function ArticleList() {
  const navigate = useNavigate();
  const {
    tableData,
    pagination,
    loading,
    setPagination,
    setSearchForm,
    removeArticle,
    changeArticleStatusInf,
  } = useArticleTable();
  const showConfirm = (row: Article.Row) => {
    Modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除【${row.title}】?`,
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      onOk() {
        removeArticle(row);
      },
    });
  };
  const showStatusConfirm = (type: "0" | "1", row: Article.Row) => {
    Modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除${type === "0" ? "发布" : "下架"}【${row.title}】?`,
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      onOk() {
        changeArticleStatusInf(row.id, type);
      },
    });
  };
  const columns: TableProps<Article.Row>["columns"] = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      width: 180,
      ellipsis: true,
      fixed: "left",
      align: "center",
    },
    {
      title: "缩略图",
      dataIndex: "thumbnail",
      key: "thumbnail",
      width: 100,
      align: "center",
      render: (_, { thumbnail }) => (
        <>{thumbnail && <Image width={35} height={35} src={thumbnail} />}</>
      ),
    },
    {
      title: "作者",
      dataIndex: "createName",
      key: "createName",
      width: 100,
      ellipsis: true,
      align: "center",
    },
    {
      title: "摘要",
      key: "summary",
      dataIndex: "summary",
      ellipsis: true,
      width: 180,
      align: "center",
    },
    {
      title: "标签",
      key: "tagList",
      align: "center",
      width: 280,
      render: (_, { tagList }) => (
        <>
          {tagList?.map((tag) => (
            <Tag color="processing" key={tag.tagId}>
              {tag.tagName}
            </Tag>
          ))}
        </>
      ),
    },
    {
      title: "是否置顶",
      key: "isTop",
      dataIndex: "isTop",
      width: 100,
      align: "center",
      render: (_, { isTop }) => <>{["置顶", "不置顶"][Number(isTop)]}</>,
    },
    {
      title: "可否评论",
      key: "isComment",
      dataIndex: "isComment",
      width: 100,
      align: "center",
      render: (_, { isTop }) => <>{["开启", "关闭"][Number(isTop)]}</>,
    },
    {
      title: "浏览数量",
      key: "viewCount",
      dataIndex: "viewCount",
      width: 100,
      align: "center",
    },
    {
      title: "点赞数",
      key: "star",
      dataIndex: "star",
      width: 100,
      align: "center",
    },
    {
      title: "创建时间",
      key: "createTime",
      dataIndex: "createTime",
      width: 180,
      align: "center",
    },
    {
      title: "更新时间",
      key: "updateTime",
      dataIndex: "updateTime",
      width: 180,
      align: "center",
    },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 380,
      align: "center",
      render: (_, row) => (
        <Space size={2} wrap>
          <PermissionBtn code="article.comment">
            <Button type="link" onClick={()=>{
              navigate(`/content/comment/${row.id}`)
            }}>
              查看评论
            </Button>
          </PermissionBtn>
          <PermissionBtn code="article.edit">
            <Button
              type="link"
              onClick={() => {
                navigate(`/writing?id=${row.id}`);
              }}
            >
              编辑
            </Button>
          </PermissionBtn>
          <PermissionBtn code="article.remove">
            <Button
              type="link"
              danger
              onClick={() => {
                showConfirm(row);
              }}
            >
              删除
            </Button>
          </PermissionBtn>
          <PermissionBtn code="article.view">
            <Button type="link" onClick={()=>{
               const queryParams = new URLSearchParams({ id: row.id});
              navigate({pathname:`/content/article/detail`, search: `?${queryParams.toString()}`})
            }}>查看</Button>
          </PermissionBtn>
          {row.status === "0" ? (
            <PermissionBtn code="article.off">
              <Button
                type="link"
                onClick={() => {
                  showStatusConfirm("1", row);
                }}
              >
                下架
              </Button>
            </PermissionBtn>
          ) : (
            <PermissionBtn code="article.publish'">
              <Button
                type="link"
                onClick={() => {
                  showStatusConfirm("0", row);
                }}
              >
                发布
              </Button>
            </PermissionBtn>
          )}
        </Space>
      ),
    },
  ];
  return (
    <div className="page__wrap--g">
      <div className="form__wrap--g">
        <QueryForm
          onChange={(form: Article.Query) => {
            setPagination({
              pageSize: pagination.pageSize,
              total: pagination.total,
              pageNo: 1,
            });
            setSearchForm(form);
          }}
        />
      </div>
      <div className="table__wrap--g">
        <Table
          columns={columns}
          dataSource={tableData}
          size="small"
          loading={loading}
          rowKey="id"
          sticky
          bordered
          scroll={{ x: 1800 }}
          pagination={false}
        />
      </div>
      <div className="pagination__wrap--g">
        <Pagination
          pageSize={pagination.pageSize}
          current={pagination.pageNo}
          total={pagination.total}
          showQuickJumper={true}
          showTotal={(total) => `共${total}条`}
          onChange={(page, size) => {
            setPagination({
              total: pagination.total,
              pageNo: page,
              pageSize: size,
            });
          }}
        />
      </div>
    </div>
  );
}
